<template>
  <div>
    <div class="out_div">
      <div class="ins_div">
        <div v-for="item in dataStatisticsList" :key="item.index" class="dataStatistics_style">
          <div class="title">
            <el-statistic title="" :value="item.title" value-style="font-size:18px" />
          </div>
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </div>
      <div>
        <div class="title_fonts">
          客户列表
        </div>
        <div>
          <ContentWrap>
            <!-- 搜索工作栏 -->
            <el-form
                class="-mb-15px"
                :model="queryParams"
                ref="queryFormRef"
                :inline="true"
                label-width="68px">
              <el-form-item label="客户姓名" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入客户姓名"
                    clearable
                    @keyup.enter="handleQuery"
                    class="!w-180px"
                />
              </el-form-item>

<!--              <el-form-item label="订单状态" prop="status">-->
<!--                <el-select v-model="queryParams.applyState"  placeholder="请选择状态" >-->
<!--                  <el-option-->
<!--                    v-for="item in options"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value"-->
<!--                  />-->
<!--                </el-select>-->
<!--              </el-form-item>-->

              <el-form-item label="订单状态" prop="whether">
                <el-select v-model="queryParams.applyState" placeholder="请选择" clearable >
                  <el-option
                    v-for="dict in getIntDictOptions(DICT_TYPE.APPLICATION_STATE)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>

              </el-form-item>

              <el-form-item label="申请日期" prop="createTime">
                <el-date-picker
                    v-model="queryParams.createTime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                    class="!w-240px"
                />
              </el-form-item>

              <el-form-item label="是否智能匹配" prop="whether" label-width="350rpx">
                <el-select
                  v-model="queryParams.whether"
                  placeholder="请选择"
                  clearable
                  label-width="auto"
                  class="!w-240px"
                >
                  <el-option
                    v-for="dict in getIntDictOptions(DICT_TYPE.INTE_MAT_NOT)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>

              </el-form-item>

              <el-form-item>
                <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
                <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
              </el-form-item>
            </el-form>
          </ContentWrap>
          <!-- 列表 -->
          <ContentWrap>
            <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border >
              <el-table-column label="订单编号" align="center" prop="id" width="150px" />
              <el-table-column
                  label="派单时间"
                  align="center"
                  prop="createTime"
                  :formatter="dateFormatter"
                  width="200px"
              />
              <el-table-column label="申请人" align="center"   prop="applicant" width="150px" >
              </el-table-column>
              <el-table-column label="申请产品" align="center" prop="productName" width="180px" />
              <el-table-column label="预估额度" align="center" prop="amount" width="200px" />
              <el-table-column label="实际放款额度" align="center" prop="practicalAmount" width="180px" >
                <template #default="scope">
                  <el-statistic title="" :value="scope.row.practicalAmount" value-style="font-size:14px" />
                </template>
              </el-table-column>
              <el-table-column label="实际放款时间" align="center" prop="practicalTime" :formatter="dateFormatter" width="150px" />
              <el-table-column label="是否智能匹配" align="center" prop="whether" width="150px" >
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.INTE_MAT_NOT" :value="scope.row.whether" />
                </template>
              </el-table-column>

              <el-table-column label="审核流程" align="center" prop="applyState" width="150px" >
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.ORDERTYPE" :value="scope.row.flowN" />
                </template>
              </el-table-column>
              <el-table-column label="订单状态" align="center" prop="applyState" width="150px" >
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.APPLICATION_STATE" :value="scope.row.applyState" />
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button
                      link
                      type="primary"
                      @click="openForm(scope.row.id)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Pagination
                :total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
          </ContentWrap>
        </div>
      </div>
    </div>


</template>
<script lang="ts" setup>
import * as UsersApis from "@/api/hutai/homepage";
import * as UsersApi from '@/api/hutai/order/index';
import {dateFormatter} from "@/utils/formatTime";
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useRouter } from "vue-router";
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const queryFormRef = ref() // 搜索的表单
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  applyState: null,
  createTime: null
})
const options = [
  {
    value: '0',
    label: '失败',
  },
  {
    value: '1',
    label: '待跟进',
  },
  {
    value: '2',
    label: '跟进中',
  },
  {
    value: '3',
    label: '完成',
  }
  ]

const dataStatisticsList =ref([])

const getList = async () => {
  loading.value = true
  try {
    const data = await UsersApi.getOrderApplicationPage(queryParams)
    console.log(data)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
  loadStatistics()
}

const { push } = useRouter()

const loadStatistics = async ()=>{
  dataStatisticsList.value = []
  await UsersApis.getAgentWMyFollowUpUser(0).then(res=>{
    dataStatisticsList.value.push({title:res,name:"我的客户(单)"})
  })
  await UsersApis.getAWUpUser(0).then(res=>{
    dataStatisticsList.value.push({title: res,name: "当月已跟进客户（人)"})
  })
  await UsersApis.getMonthCjNumber(0).then(res=>{
    dataStatisticsList.value.push({title: res,name: "当月已成交订单数量"})
  })
  await UsersApis.getMonthCjMoney(0).then(res=>{
    dataStatisticsList.value.push({title: res,name: "当月已成交金额（元）"})
  })
}

/** 添加/修改操作 */
const openForm = (id: number) => {
  push({
    path:'/salesmanHome/salesmanHomeDetails',
    query:{id:id}
  })
}
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}



/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style lang="scss">
.title_fonts{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  font-size: 18px;
  color: black;
}

.dataStatistics_style{
  width: 250px;
  height: 100px;
  background-color: rgb(240 240 240);
  border-radius: 5px;

  .title{
    padding: 15px 10px 10px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
  }

  .name{
    font-size: 12px;
    text-align: center;
  }
}

.out_div{
  min-height: 100px;
  padding: 20px;
  margin: 10px auto;
  background-color: white;

  .ins_div{
    display: flex;
    justify-content: space-between;
  }

  .title_div{
    display: flex;
    justify-content: space-between;
  }

  .title_right{
    padding-right: 20px;
    font-size: 12px;
  }

  .title_font{
    font-size: 14px;
    font-weight: 600;
    color: #165dff;
  }
}
</style>
